<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>会议室申请</title>
    <script src="/assets/js/config.js"></script>
    <link rel="stylesheet" type="text/css" href="css/apply.css"/>
</head>
<body>
<form id="fm">
    <h2 align=" center" id="title">会议室使用申请</h2>
    <p>申请时间： <span id="crtDate"></span></p>
    <table border="1" style="border-collapse: collapse;width: 100%">
        <tr>
            <td>姓名</td>
            <td><input class="layui-input" name="userName" readonly></td>
            <td>部门</td>
            <td><input class="layui-input" name="department" readonly></td>

        </tr>
        <tr>
            <td>会议名称</td>
            <td colspan="5"><input class="layui-input" autocomplete="off" name="fileName"></td>
        </tr>
        <tr>
            <td>会议室</td>
            <td colspan="5">
                <select id="annex"  style="width: 200px;height: 30px">
                    <option value="">请选择</option>
                    <option value="1号会议室">1号会议室</option>
                    <option value="2号会议室">2号会议室</option>
                    <option value="3号会议室">3号会议室</option>
                    <option value="多功能厅">多功能厅</option>
                    <option value="研发楼会议室">研发楼会议室</option>
                </select>
            </td>

        </tr>
        <tr>
            <td>预约日期</td>
            <td>
                <input  autocomplete="off" class="layui-input" name="date" id="test1">
            </td>
            <td>预约时段</td>
            <td>
                <input  autocomplete="off" class="layui-input" name="timeRange1" id="test2" >
            </td>
        </tr>
        <tr>
            <td>参会人员</td>
            <td colspan="5"><input class="layui-input" name="reason"  autocomplete="off"></td>
        </tr>
    </table>
    <br>
</form>
<table id="table" class="layui-table" style="width: 50%;">
    <colgroup>
        <col width="150">
        <col width="200">
        <col>
    </colgroup>
    <thead>
    <tr>
        <th>预约人</th>
        <th>日期</th>
        <th>时段</th>
    </tr>
    </thead>
    <tbody id="tbody">

    </tbody>
</table>
</body>
<script type="text/javascript" src="js/design.js"></script>
<script type="text/javascript" src="js/approve.js"></script>
<script type="text/javascript" src="js/multiSelect.js"></script>

<script>
    var room='';
    var preList=[];
    layui.use('laydate', function(){
        $("#table").hide()
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#test1' //指定元素
       , trigger: 'click'
        });

        laydate.render({
            elem: '#test2'
            ,type: 'time'
            ,range: true
            , trigger: 'click'
            ,format:'HH:mm'
        });
        $("#annex").change(function () {
            room=$("#annex option:selected").attr('value');
            if(room){
                $.get('/office/flowStepInstance/selectMeeting?room=' + room,function(res) {
                    preList = res.obj.map(item => {
                        let one = JSON.parse(item.subTemplateId)
                        return {
                            id:item.id,
                            date: one.date,
                            timeRange1: one.timeRange1,
                            timeRange2: one.timeRange2,
                            userName: item.userName,
                            status:item.status,
                        }
                    });
                    if(!preList||preList.length==0){
                        $("#table").hide()
                    }else{
                        var html=''
                        preList.map(item=>{
                            html+=`<tr><td>${item.userName}</td><td>${item.date}</td><td>${item.timeRange1}~${item.timeRange2}</td></tr>`
                        })
                        $("#tbody").html(html);
                        $("#table").show()
                    }

                })
            }else{
                showAlert('请选择预约房间')
            }

        })
    });
</script>
<script>
    var templateId=13;
    var clickFlag=2
    $(function () {
        var id = getUrlParam();
        if (id) {
            //审批进入
            drawApprove(id);
            $("input").prop('readonly', true);
            $("#app").hide();
            $(".layui-layer-btn").hide();
            //查询流程详情
            $.post('/office/flowStepInstance/queryDetail', {id: id}, function (res) {
                if (res.code == 200) {
                    var data = res.obj;
                    let one = JSON.parse(data.subTemplateId)
                    $("#annex").val(data.annex);
                    $("[name='fileName']").val(data.fileName);
                    $("[name='date']").val(one.date);
                    $("[name='userName']").val(data.userName);
                    $("[name='department']").val(data.department);
                    var text=one.timeRange1+'~'+one.timeRange2;
                    $("[name='timeRange1']").val(text);
                    $("[name='reason']").val(data.reason);
                    $("#crtDate").text(formatDate(new Date(data.crtDate)));
                }
            });
        } else {
            //新建流程
           drawConstance();
           $("#app").hide();
            var today = formatDate(new Date())
            $("#crtDate").text(today);
            $("[name='userName']").val(getUserName());
            $("[name='department']").val(getOrgName());
        }
    });
    function submitForm() {
        if(clickFlag==1){
            showAlert('您已提交了流程,为避免重复提交，请退出后重新进入页面！！！');
            return false;
        }
        if(!room){
            showAlert('请选择会议室');
            return
        }
        if (!validateCommonForm()) {
            showAlert("请补全表单详情后提交哦");
            return false;
        }
        var a=  $("[name='date']").val()
        var b =$("[name='timeRange1']").val()
        let ext =
            {
                timeRange1:b.split("-")[0].trim(),
                timeRange2:b.split("-")[1].trim(),
                date: a
            };
        var param = getSubmitParam();
        param.subTemplateId = JSON.stringify(ext);

        param.annex =room;
        let preValidate = preList.filter(x => (x.date == ext.date&&x.status!=4));
        let start = new Date(ext.date + " " + ext.timeRange1).getTime()
        let end = new Date(ext.date + " " + ext.timeRange2).getTime()
        if(start>=end){
            showAlert('开始时段必须小于结束时段')
            return
        }
        let flag = false;
        preValidate.map(item => {
            let start1 = new Date(ext.date + " " + item.timeRange1).getTime()
            let end1 = new Date(ext.date + " " + item.timeRange2).getTime()
            if ((start>start1&&start<end1)||(end>start1&&end<end1)) {
                flag = true
            }
        })
        if (flag) {
            showAlert('预约时段已被占用，请重新选择时段');
            return;
        }


        $.get('/office/flowStepInstance/selectRoom',{date: param.date},function (res1) {
            if (res1.code == 200) {
                if (res1.obj && res1.obj.length > 0) {
                    //获取所有可能冲突的会议室
                    let conflict = []
                    res1.obj.map(item => {
                        let subTemplateId = JSON.parse(item.subTemplateId)
                        let startDb = new Date(subTemplateId.date + " " + subTemplateId.timeRange1).getTime();
                        let endDb = new Date(subTemplateId.date + " " + subTemplateId.timeRange2).getTime();
                        if ((start > startDb && start < endDb) || (end > startDb && end < endDb)||(start<startDb&&end>endDb)) {
                            conflict.push(item)
                        }
                    })
                    if (conflict.length != 0) {
                        //会议室有冲突
                        let conflictLead = [];
                        $.get('/office/hrEmployDetail/selectLead',function (res) {
                            if (res.code == 200) {
                                let lead = res.obj;
                                conflict.map(each => {
                                    lead.map(item => {
                                        if (each.reason.indexOf(item.name) != -1) {
                                            if (conflictLead.indexOf(item.name) == -1) {
                                                conflictLead.push(item.name);
                                            }
                                        }
                                    })
                                })
                                conflictLead = conflictLead.filter(item => param.reason.indexOf(item) != -1)
                                if(conflictLead.length!=0){
                                    let name=conflictLead.join(',');
                                    showAlert(name+'会议时间冲突，是否仍然预约?',3,function () {
                                        //预约
                                        delete  param.crtDate;
                                        $.post('/flowWork/addBusinessFlow', param,function (res) {
                                            showModal(res.msg, function () {
                                                uni.navigateBack();
                                            })
                                        })
                                    })
                                }else{
                                    delete  param.crtDate;
                                    layer.confirm('确认提交', function (index) {
                                        param.userId = localStorage.getItem("userId");
                                        param.title = $("#title").text();
                                        param.content='apply/meeting'
                                        param.templateId = templateId
                                        $.post('/office/flowWork/addBusinessFlow', param,function (res) {
                                            if(res.code==200){
                                                showAlert('添加成功',1,function () {
                                                    clickFlag=1;
                                                    closeDialog();
                                                })
                                            }
                                        })
                                    })
                                }

                            }

                        })

                    } else {
                        //没有冲突的会议室，直接保存
                        delete  param.crtDate;
                        layer.confirm('确认提交', function (index) {
                            param.userId = localStorage.getItem("userId");
                            param.title = $("#title").text();
                            param.content='apply/meeting'
                            param.templateId = templateId
                            $.post('/office/flowWork/addBusinessFlow', param,function (res) {
                                if(res.code==200){
                                    showAlert('添加成功',1,function () {
                                        clickFlag=1;
                                        closeDialog();
                                    })
                                }
                            })
                        })
                    }
                } else {
                    //预约
                    delete  param.crtDate;
                    layer.confirm('确认提交', function (index) {
                        param.userId = localStorage.getItem("userId");
                        param.title = $("#title").text();
                        param.content='apply/meeting'
                        param.templateId = templateId
                        $.post('/office/flowWork/addBusinessFlow', param,function (res) {
                            if(res.code==200){
                                showAlert('添加成功',1,function () {
                                    clickFlag=1;
                                    closeDialog();
                                })
                            }
                        })
                    })
                }
            }
        })

    }

</script>

</html>
